import React, { Component } from 'react'
import CatelistContainer from './Catelist.style'

export default class Catelist extends Component {
  render() {

    let { list, nav, change } = this.props;
    return (
      <CatelistContainer>

        <div>
          <ul>
            {
              Object.keys(list).map((item, index) => {
                return (
                  <li key={index}
                    onClick={()=>{
                      change(item)
                    }}
                    className={nav === item ? 'active' : ''} >
                    {item}
                  </li>
                )
              })
            }
          </ul>
        </div>


        <div>
          <ul>
            {
             list[nav] && list[nav].map((item, index) => {
                return (
                  <li key={index}>
                    {item}
                  </li>
                )
              })
            }


          </ul>
        </div>

      </CatelistContainer>
    )
  }
}
